<template>
	<view>
		<view class='productList'>
			<view class='search bg-color acea-row row-between-wrapper c_fff'>
				Hi, 您当前有{{yiyuan.length}}条新的预约信息，请准时赴约哟~
			</view>
			<view class="h44"></view>
			
			<view class="calc-h p-15">
				<view  v-for="(item,index) in yiyuan" :key="index" class="m-b-15">
					<info :options="item"/>
				</view>
			</view>
            
			
		</view>
		<view class='noCommodity' v-if="yiyuan.length==0">
			<view class='pictrue'>
				<image src='http://47.104.138.35//uploads/attach/2021/11/20211107/e7f459cbb72c733d3f3b3efb024c544c.png'></image>
			</view>
		</view>

	</view>
</template>

<script>
	import { getYuYueInfo } from '@/api/order'
	import info from '../information/components/hm-information-card/index'
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: mapGetters(['uid']),
		components: {
			info
		},
		data() {
			return {
				
				yiyuan: []
			};
		},
		onLoad: function(options) {
			this.getYuyueList()
		},
		methods: {
            getYuyueList() {
				getYuYueInfo({}).then( res => {
					console.log(res)
					this.yiyuan = res.data
				})
			}
        }
	}
</script>

<style scoped lang="scss">
	
	.p-15 {padding: 30rpx;}
	.box-shaow {box-shadow: 0 3px 5px rgba(0,0,0,.1);border-radius: 5px;overflow: hidden;}
	.bg-fff {background-color: #fff;}
	.b-r-15 {border-radius: 30rpx;overflow: hidden;}
	.round-yuyue {
		width: 140rpx;
		height: 60rpx;
		font-size: 24rpx;
		border-radius: 30rpx;
		background-color: #c3a575;
	}
    .b-rd-1 {border:1px solid #ee672d; border-radius: 2px;}
    .b-gr-1 {border:1px solid #6bc69f;border-radius: 2px;}
    .calc-h {    height: calc(100vh - 80rpx);background-color: #eee;}
    .red {
        color: #ee672d;
    }
    .green {
        color: #6bc69f;
    }
    .bg-blue {background-color: #1d66f5;}
    .b-t-1 {border-top: 1px solid #eee;}
    .b-b-1 {border-bottom: 1px solid #eee;}
 
	.productList .search {
		width: 100%;
		height: 86rpx;
		padding-left: 23rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	.productList .search .input {
		width: 640rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.productList .search .input input {
		width: 548rpx;
		height: 100%;
		font-size: 26rpx;
	}

	.productList .search .input .placeholder {
		color: #999;
	}

	.productList .search .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.productList .search .icon-pailie,
	.productList .search .icon-tupianpailie {
		color: #fff;
		width: 62rpx;
		font-size: 40rpx;
		height: 86rpx;
		line-height: 86rpx;
	}

	.productList .nav {
		height: 86rpx;
		color: #454545;
		position: fixed;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;
		margin-top: 86rpx;
		top: 0;
		z-index: 9;
	}

	.productList .nav .item {
		width: 25%;
		text-align: center;
	}

	.productList .nav .item.font-color {
		font-weight: bold;
	}

	.productList .nav .item image {
		width: 15rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}

	.productList .list {
		padding: 0 20rpx;
		margin-top: 172rpx;
	}

	.productList .list.on {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 30rpx 0;
		margin: 0;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 345rpx;
	}

	.productList .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productList .list .item .text {
		padding: 20rpx 17rpx 26rpx 17rpx;
		font-size: 30rpx;
		color: #222;
	}

	.productList .list .item .text.on {
		width: 508rpx;
		padding: 0 0 0 22rpx;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}

	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}

	.productList .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}

	.noCommodity {
		background-color: #fff;
		padding-bottom: 30rpx;
	}
    .b-r-5 {border-radius: 5px;}
</style>
